<script lang="ts" setup>
// 引入组件 - 已通过 Vite 自动导入
import { useDataReport } from "./composables/useDataReport"

// 使用业务逻辑
const {
  loading,
  timeRange,
  channelFilter,
  statsCards,
  chartData,
  channelTableData,
  topAgentsData,
  userVersionDistribution,
  timeRangeOptions,
  channelOptions,
  handleTimeRangeChange,
  handleChannelChange,
  refreshData
} = useDataReport()
</script>

<template>
  <div class="app-container">
    <div class="page-content">
      <!-- 页面头部 -->
      <PageHeader
        title="数据报表"
        subtitle="渠道绩效分析和用户活跃度统计"
      >
        <template #extra>
          <!-- 时间范围选择 -->
          <el-select
            v-model="timeRange"
            placeholder="选择时间范围"
            style="width: 120px"
            @change="handleTimeRangeChange"
          >
            <el-option
              v-for="option in timeRangeOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>

          <!-- 渠道筛选 -->
          <el-select
            v-model="channelFilter"
            placeholder="选择渠道"
            style="width: 140px"
            @change="handleChannelChange"
          >
            <el-option
              v-for="option in channelOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </template>
      </PageHeader>

      <!-- 统计卡片 -->
      <StatsCards :cards="statsCards" :loading="loading" />

      <!-- 图表区域 -->
      <div class="charts-section">
        <!-- 渠道绩效表格 -->
        <div class="chart-wrapper">
          <ChannelEffectTable
            :data="channelTableData"
            :loading="loading"
          />
        </div>

        <!-- 内容发布趋势图 -->
        <div class="chart-wrapper">
          <ChartContainer
            title="内容发布趋势"
            chart-type="line"
            :data="chartData.contentTrend"
            :loading="loading"
          />
        </div>

        <!-- 版本用户活跃度对比 -->
        <div class="chart-wrapper">
          <ChartContainer
            title="版本用户活跃度对比"
            chart-type="bar"
            :data="chartData.versionActivity"
            :loading="loading"
          />
        </div>

        <!-- 代理商绩效排行 -->
        <div class="chart-wrapper">
          <TopAgentsList
            :data="topAgentsData"
            :loading="loading"
          />
        </div>

        <!-- 用户版本分布 -->
        <div class="chart-wrapper">
          <ChartContainer
            title="用户版本分布"
            chart-type="pie"
            :data="userVersionDistribution"
            :loading="loading"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "./styles/index.scss";
</style>
